import React, { useEffect } from 'react'
import { useDispatch, useSelector } from "umi";
import AttentColumn from './components/AttentColumn';
import AttentTable from './components/AttentTable';
import { Spin } from "antd"
import "./css/index.less"
export default function index() {
    const { chartList, tableList } = useSelector(state => state.attendance);
    const loading = useSelector(state => state.loading);
    const userInfos = JSON.parse(localStorage.getItem("userProfile"));
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch({
            type: "attendance/initFormat"
        });
    }, [])
    console.log(tableList)
    return (
        <Spin spinning={loading.effects["attendance/initFormat"]} tip={"加载中"} size={"large"}>
            <div className="attendance-container">
                {userInfos.identity === 1 && (
                    <div className="list-container" style={{ width: "49.7%" }}>
                        {chartList.length > 0 && chartList.map((el, index) => {
                            console.log(el)
                            return (<AttentColumn {...el} key={index}></AttentColumn>)
                        })}
                    </div>)

                }
                <div className="list-container" style={{ width: userInfos.identity === 1 ? "49.7%" : "100%" }}>
                    {tableList.map((el, index) => {
                        return <AttentTable {...el} key={index}></AttentTable>
                    })}
                </div>
            </div>
        </Spin>
    )
}
